<!-- Copyright 2008 (c) - GNU GPLv3 -->

<vexi xmlns:ui="vexi://ui" xmlns="vexi.layout">
    <ui:box framewidth="500" frameheight="400" layout="place">
        <border id="marker" align="topleft" depth="3" border="brown" fill="#ffeedd" width="20" height="20" />
        
        var max = function(a, b) { return a>b ? a : b; }
        var min = function(a, b) { return b>a ? a : b; }
        
        var key_x = null;
        var key_y = null;
        
        var accel_x = 0;
        var accel_y = 0;
        
        KeyPressed ++= function(v) {
            cascade = v;
            switch(v) {
            case "left":
            case "right":
                key_x = v;
                break;
            case "up":
            case "down":
                key_y = v;
                break;
            }
        }
        
        KeyReleased ++= function(v) {
            cascade = v;
            if (key_x == v) key_x = null;
            if (key_y == v) key_y = null;
        }
        
        var shadow = [];
        for (var i=0; 9>i; i++) {
            shadow[i] = vexi.box;
            var sfill = '#'+(9-i)+(9-i)+(9-i)+(9-i)+(9-i)+(9-i);
            shadow[i].fill = sfill;
            shadow[i].width = $marker.width;
            shadow[i].height = $marker.height;
            shadow[i].align = "topleft";
            thisbox[0] = shadow[i];
        }
        
        vexi.thread = function(v) {
            while (true) {
                if (!visible) break;
                // x movement
                if (key_x == "right") {
                    if (0>accel_x) accel_x++;
                    if (10>accel_x) accel_x++;
                } else if (key_x == "left") {
                    if (accel_x>0) accel_x--;
                    if (accel_x>-10) accel_x--;
                } else {
                    if (0>accel_x) accel_x++;
                    if (accel_x>0) accel_x--;
                }
                // y movement
                if (key_y == "down") {
                    if (0>accel_y) accel_y++;
                    if (10>accel_y) accel_y++;
                } else if (key_y == "up") {
                    if (accel_y>0) accel_y--;
                    if (accel_y>-10) accel_y--;
                } else {
                    if (0>accel_y) accel_y++;
                    if (accel_y>0) accel_y--;
                }
                for (var i=8; i>0; i--) {
                    shadow[i].x = shadow[i-1].x;
                    shadow[i].y = shadow[i-1].y;
                }
                $marker.x = max(0, min(width-$marker.width, $marker.x+(accel_x)));
                $marker.y = max(0, min(height-$marker.height, $marker.y+(accel_y)));
                shadow[0].x = $marker.x;
                shadow[0].y = $marker.y;
                vexi.thread.sleep(50);
            }
        }
        
        vexi.ui.frame = thisbox;
        
    </ui:box>
</vexi>